 <template>

    <div>
      <transition name="mask">
          <div class="panel_mask" @touchmove.prevent v-show="show" @click="closePanel"></div>
      </transition>
      <transition name="panel">
      <div class="cate_select_panel" v-show="show">
           <div class="panel_header">
               <img class="close_icon" @click="closePanel" src="~@/assets/imgs/common/close_icon2.png">
               <span class="header_title  pf_m">商品分类</span>
           </div>
           <div class="panel_inner" :style="{'top':'1.2rem'}">
             <div class="panel_left fix_iphonex">
               <ul class="root_cate_list">
                 <li class="root_cate_item" :class="{'actived':rootCateActiveId == item.id}" v-for="(item,index) in rootCateList" :key="item.id" @click="changeRootCate(item,index)">{{item.name}}</li>
               </ul>
             </div>
             <div class="panel_right fix_iphonex">
               <ul class="second_cate_list">
                 <li class="second_cate_item px1bb" :class="{'extend':secondCateActiveId == item.id && item.isLeaf != 'Y','selected':secondCateActiveId == item.id && item.isLeaf == 'Y'}" v-for="(item,index) in secondCateList" :key="item.id">
                      <div class="item_content"  @click="changeSecondCate(item,index)">
                         <span class="item_name">{{item.name}}</span>
                         <img class="down_arrow" v-if="item.isLeaf != 'Y'" src="~@/assets/imgs/common/down_arrow.png">
                      </div>
                      <transition>
                        <ul class="third_cate_list" v-if="item.isLeaf != 'Y'">
                          <li class="third_cate_item px1bb" :class="{'selected':thirdCateActiveId == cate.id}" v-for="(cate,i) in thirdCateList" :key="cate.id" @click.stop="changeThirdCate(cate,i)">{{cate.name}}</li>
                        </ul>
                      </transition>
                 </li>
               </ul>
             </div>
           </div>
      </div>
      </transition>
    </div>

</template>

<script>
import HeaderBar from "@/components/header.vue"
import {mapState,mapActions} from 'vuex';
export default {
  props: {
    show:{
      type:Boolean,
      required:true
    },
    initIds:{
      type:Array,
      default:()=>[]
    },
    initNames:{
      type:Array,
      default:()=>[]
    },
      
  },
  components:{
    HeaderBar,
  },
  data() {
    return {
        rootCateActiveId:-1,
        secondCateActiveId:-1,
        thirdCateActiveId:-1,
    
        rootCateList:[],

        secondCateList:[],
        thirdCateList:[],
        selectedCateName:[],
        selectedCateId:[]
    }
  },
  computed: mapState({
    headerHeight: state => state.headerHeight,
  }),

  mounted() {
    this.getRootCategory();
  },
  watch:{
    initIds(newVal){
      if(newVal.length > 0){
        this.rootCateActiveId = newVal[0];
        this.selectedCateId = newVal;
        this.selectedCateName = this.initNames;
        this.getCateByParentId(newVal[0],2);
        if(newVal[1]){
          this.secondCateActiveId = newVal[1];
          this.getCateByParentId(newVal[1],3);
        }
        if(newVal[2]){
          this.thirdCateActiveId = newVal[2];
        }
      }
    }
  },

  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),

    getRootCategory(){
      this.$ajax.getRootCategory({}).then((res)=>{
        if(res.code=='0000'){
          this.rootCateList = res.data;
          this.initRootCateActiveId();
        }
      });
    },

    getCateByParentId(id,type){
      if(type == 2){
        this.secondCateList  = [];
      }else{
        this.thirdCateList  = [];
      }
      this.$ajax.getCateByParentId({
        parentId:id
      }).then((res)=>{
        if(res.code == '0000'){
          if(type == 2){
            this.secondCateList  = res.data;
          }else{
            this.thirdCateList  = res.data;
          }
        }
      });
    },

    initRootCateActiveId(){
      if(this.rootCateList.length > 0 && this.rootCateActiveId == -1){
        this.secondCateActiveId = -1;
        this.thirdCateActiveId = -1;
        this.changeRootCate(this.rootCateList[0],0)
      }
    },

    changeRootCate(item,index){
        if(this.rootCateActiveId == item.id){
            return;
        };
        let selectedCateName = [];
        selectedCateName.push(item.name);
        this.selectedCateName = selectedCateName;
        let selectedCateId = [];
        selectedCateId.push(item.id);
        
        this.selectedCateId = selectedCateId;
        this.rootCateActiveId = item.id;

       

        if(item.isLeaf != 'Y'){
          this.getCateByParentId(item.id,2);
        }else{
          this.secondCateActiveId = -1;
          this.thirdCateActiveId = -1;
          this.secondCateList = [];
          this.finish();
        }
        
    },
    changeSecondCate(item,index){
        if(this.secondCateActiveId == item.id){
            this.secondCateActiveId = -1;
            return;
        };
        this.secondCateActiveId = item.id;
        this.selectedCateName.splice(1,1,item.name);
        this.selectedCateId.splice(1,1,item.id);


        if(item.isLeaf != 'Y'){
          this.getCateByParentId(item.id,3);
        }else{
          this.selectedCateName.splice(2,1);
          this.selectedCateId.splice(2,1);
          this.thirdCateActiveId = -1;
          this.thirdCateList = [];
          this.finish();
        }
    },
    changeThirdCate(item,index){
        if(this.thirdCateActiveId == item.id){
          this.thirdCateActiveId = -1;
          return;
        };
        this.selectedCateName.splice(2,1,item.name);
        this.selectedCateId.splice(2,1,item.id);
        this.thirdCateActiveId = item.id;
        this.finish();
    },
    finish(){
      this.$emit('submit',this.selectedCateId,this.selectedCateName);
      this.closePanel();
    },
    closePanel(){
      this.$emit('update:show',false);
    }
  },
  watch:{
    show(val){
      if(val){
        let cssStr = "overflow-y: hidden;";
        document.body.style.cssText = cssStr;
      }else{
        let cssStr = "overflow-y: auto;";
        document.body.style.cssText = cssStr;
      }
    }
  }
}
</script>

<style lang="less" scoped>

.cate_select_panel{
  position: fixed;
  // top:0;
  left: 0;
  width: 100%;
  // height: 100%;
  // top:5rem;
  height: 8.4rem;
  bottom:0;
  z-index: 105;
  border-radius: 0.16rem 0.16rem 0 0 ;
  background-color: #fff; 
  
  .panel_inner{
      position: absolute;
      left: 0;
      width: 100%;
      bottom: 0;
      border-top:0.18rem solid #F6F6F6;
      .panel_left{
        position: absolute;
        top:0;
        left: 0;
        width: 2rem;
        bottom: 0;
        overflow-y: scroll;
        padding-top: 0.2rem;
        z-index: 2;
        border-right: 0.02rem solid #eee;
        .root_cate_list{
          .root_cate_item{
            height: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.28rem;
            color: #666;
            position: relative;

            &.actived{
              color: #14C878;
              &::before{
                content:'';
                position: absolute;
                width: 0.06rem;
                height: 0.3rem;
                background-color: #14C878;
                top: 0.3rem;
                left: 0;
              }
            }
          }
        }
        
      }
      .panel_right{
        position: absolute;
        top:0;
        left: 2rem;
        right: 0;
        bottom: 0;
        overflow-y: scroll;
        .second_cate_list{
          .second_cate_item{
            
            .item_content{
              height: 0.96rem;
              padding: 0 0.24rem 0 0.4rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .item_name{
                font-size: 0.32rem;
                color: #333;
              }
              .down_arrow{
                width: 0.28rem;
                height: 0.16rem;
                transition: all 0.3s;
                transform: rotate(0deg);
              }
            }

            &.extend{
              .down_arrow{
                transform: rotate(180deg);
              }
            }
            &.selected{
              .item_content{
                  // background-color: #E7F9F1;
                  .item_name{
                    color: #14C878;
                  }
              }
            }
            .third_cate_list{
                // max-height: 0;
                // overflow: hidden;

                height: 0;
                overflow: hidden;
               

              .third_cate_item{
                  background-color: #F6F6F6;
                  height: 0.96rem;
                  padding: 0 0.4rem 0 0.4rem;
                  font-size: 0.28rem;
                  color: #666;
                  display: flex;
                  align-items: center;
                  &.selected{
                    color: #14C878;
                    // background-color: #E7F9F1;
                  }
                  &.px1bb{
                    &::after{
                      background-color: #ddd;
                      left: 0.4rem;
                      width: auto;
                      right: 0.4rem;
                    }
                  }
              }
            }
            &.extend{
              .third_cate_list{
                  height: auto;
                // max-height: 20rem;
              }
            }
          }
        }
      }
  }
}

.px1bb{
  position: relative;
  &::after{
    content: '';
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.02rem;
    background-color: #eee;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 2){
    .px1bb::after{
      transform: scaleY(0.5);
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5){
    .px1bb::after{
      transform: scaleY(0.7);
    }
}

.px1br{
  position: relative;
  &::after{
    content: '';
    width: 0.02rem;
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    height: 100%;
    background-color: #eee;
  }
}



@media screen and (-webkit-min-device-pixel-ratio: 2){
    .px1br::after{
      transform: scaleX(0.5);
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5){
    .px1br::after{
      transform: scaleX(0.7);
    }
}


.panel_header{
    height: 1.2rem;

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .close_icon{
        position: absolute;
        left: 0.4rem;
        top: 0.46rem;
        width: 0.28rem;
        height: 0.28rem;
    }
    .header_title{
       flex: 1;
       text-align: center;
       line-height: 0.4rem;
       font-size: 0.32rem;
       color: #333;
    }
}

/* x,xs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .cate_select_panel {
      height: 9.08rem!important;
  }
}
/* xr */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .cate_select_panel {
      height: 9.08rem!important;
  }
}

/* xs max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .cate_select_panel {
      height: 9.08rem!important;
  }
}
</style>
